<template>
    <div>
        <div class="vs-search-box" style="padding: 24px 22px;">
            <el-form ref="form" :inline="true" :model="paging" label-width="90px">
                <el-form-item label="门店：">
                    <el-select style="width:200px" @change="getRoomStatus" v-model="shop_id" placeholder="">
                        <el-option  v-for="(ele,index) in storeList" :key="index" :label="ele.title" :value="ele.id"></el-option>
                    </el-select>
                </el-form-item>

                <!-- <el-form-item label="">
                    <el-button @click="getRoomStatus(1)" type="primary">查询</el-button>
                </el-form-item> -->
                
                <!-- <el-form-item label="" style="float: right">
                    <div class="icon-bed-box">
                        <div class="bed-zi">
                            <i class="iconfont icon-a-bianzu4"></i>
                            <img src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/15/2x-7.png" alt="">
                            <div>榻榻米</div>
                        </div>
                        <div class="bed-zi">
                            <i class="iconfont icon-a-bianzu13"></i>
                            <img src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/15/-132x.png" alt="">
                            <div>精油床</div>
                        </div>
                        <div class="bed-zi">
                            <img src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/15/2x-8.png" alt="">
                            <i class="iconfont icon-a-bianzu5"></i>
                            <div>足浴床</div>
                        </div>
                    </div>
                </el-form-item> -->
                <el-form-item label="" style="float: right">
                    <div class="color-box">
                        <div class="color-zi">
                            <div style="background:hsla(162, 76%, 50%, 1)"></div>
                            <span>空闲中</span>
                        </div>
                        <div class="color-zi">
                            <div style="background:hsl(215deg,19%,51%)"></div>
                            <span>已预约</span>
                        </div>
                        <div class="color-zi">
                            <div style="background:hsla(5, 100%, 50%, 1)"></div>
                            <span>使用中</span>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="房间号：">
                    <el-select style="width:200px" @change="getRoomStatus" clearable v-model="room_id" placeholder="请选择">
                        <el-option
                        v-for="item in roomList"
                        :key="item.id"
                        :label="item.room_number"
                        :value="item.id"> </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="vs-table-box " v-loading="loading">
            <div class="room-chin" v-for="item in dataList" :key="item.id">
                <div class="room-title">{{item.room_number}}</div>
                <div class="room-box">
                    <div
                    v-for="val in item.bed"
                    :key="val.id"
                    >
                        <el-popover v-if="val.order" placement="right" width="350" trigger="hover">
                            <div >
                                <el-descriptions :column="1">
                                    <el-descriptions-item label="顾客">{{val.order.name}}</el-descriptions-item>
                                    <el-descriptions-item label="手机号">{{val.order.mobile}}</el-descriptions-item>
                                    <el-descriptions-item label="项目">
                                        <div class="vs-partition">
                                            <div v-for="(el,index) in val.order.projects" :key="index">
                                                <span>{{el.name}}({{el.duration}}分) </span>
                                                <span v-if="el.add_clock>0" style="margin-left:20px">加钟数:{{el.add_clock}}</span>
                                            </div>
                                        </div>
                                    </el-descriptions-item>
                                    <el-descriptions-item label="开单">
                                        {{val.order.start}} - {{val.order.end}}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="技师">
                                        <span v-for="(el,index) in val.order.staff" :key="index">
                                            <template v-if="el">
                                                {{el.name}}({{el.number}})
                                            </template>
                                        </span>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                            <div slot="reference" class="stage">
                                <div
                                class="time"
                                :class="{
                                    'leisure':val.use_status == 0,
                                    'use':val.use_status == 1,
                                    'make':val.use_status == 2,
                                }">
                                    <span>{{val.number}}</span>
                                </div>
                                <div
                                :class="{
                                    'leisure':val.use_status == 0,
                                    'use':val.use_status == 1,
                                    'make':val.use_status == 2,
                                }" class="status ">
                                    <span v-if="val.time" class="">{{val.time}}</span>
                                    <div v-else class="">{{ val.use_status | state  }}</div>
                                </div>
                                <div class="beds-img">
                                    <img :src="beds[val.type]" alt="">
                                </div>
                                <div v-if="val.use_status&&val.order" class="technical-name">
                                    <div v-for="el in val.order.staff" :key="el.id">{{el.name}}</div>
                                </div>
                            </div>
                        </el-popover>
                        <div v-else class="stage">
                                <div
                                class="time"
                                :class="{
                                    'leisure':val.use_status == 0,
                                    'use':val.use_status == 1,
                                    'make':val.use_status == 2,
                                }">{{val.number}}</div>
                                <div
                                :class="{
                                    'leisure':val.use_status == 0,
                                    'use':val.use_status == 1,
                                    'make':val.use_status == 2,
                                }" class="status ">
                                    <span v-if="val.time" class="">{{val.time}}</span>
                                    <div v-else class="">{{ val.use_status | state  }}</div>
                                </div>
                                <div class="beds-img">
                                    <img :src="beds[val.type]" alt="">
                                </div>
                                <div v-if="val.use_status&&val.order" class="technical-name">
                                    <div v-for="el in val.order.staff" :key="el.id">{{el.name}}</div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog
        title="房间操作"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        width="650px">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" >
                <el-form-item label="类型"  prop="type">
                    <el-radio v-model="form.type" :label="1">修改床位状态</el-radio>
                    <el-radio v-if="form.isType" v-model="form.type" :label="2">项目加钟</el-radio>
                </el-form-item>
                <el-form-item v-if="form.type==1" label="床位状态：" prop="use_status">
                    <el-select v-model="form.use_status" placeholder="请选择">
                        <el-option label="空闲" :value="0"> </el-option>
                        <el-option label="使用中" :value="1"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-else-if="form.type==2" label="加钟项目：" prop="order_project_id">
                    <el-select v-model="form.order_project_id" placeholder="请选择">
                        <el-option
                        v-for="(item,i) in obj.order.projects"
                        :key="i"
                        :label="item.name"
                        :value="item.id"> </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            beds: [
                "https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/15/2x-7.png",
                'https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/15/-132x.png',
                "https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/15/2x-8.png",
            ],
            dataList:[],
            room_id:'',
            shop_id:'',
            dialogVisible:false,
            loading:false,
            roomList:[],
            storeList:[],
            form:{
                type:1,
                isType:false,
                bed_id:'',
                use_status:'',//
                reserve_id:'',

                order_project_id:'',
            },
            rules:{
                use_status:{ required: true, message: '请选择床位状态', trigger: 'change' },
                order_project_id:{ required: true, message: '请选择加钟项目', trigger: 'change' }
            },
            obj:{},
            isBtn:false,
            paging: {
                username: '',//姓名
                start_time: '',//开始时间
                end_time: '',//结束时间
                page: 1,
                total: 400,
                limit: 10,
                temp:-1,//计时器
            },
        };
    },
    created() {
        this.getAllStore();
    },
    filters:{
        state(val){
            return ['空闲中','使用中','已预约'][val]
        },
    },
    methods: {
        //  获取所有门店
       async getAllStore(){
           this.loading = true;
            let {code,data} = await this.$Http.getAllStore();
            if(code){
                this.shop_id = data[0].id;
                this.storeList = data;
                this.getRoomStatus();
            }
       },
        handleClose(dom){
            this.form = this.$options.data().form;
            this.$refs['form'].resetFields();
            this.dialogVisible = false;
            dom&&dom();
        },
        chang(val){
            this.dialogVisible=true;
            this.obj = val;
            if(val.use_status==1)this.form.isType = true;
            this.form.use_status = val.use_status!=2?val.use_status:'';
        },
        submit(){
            this.$refs['form'].validate(async (valid)=>{
                if(!valid)return;
                let obj = Object.assign({},this.form);
                this.isBtn = true;
                if(obj.type==1){
                    obj.bed_id = this.obj.id;
                    if(this.obj.reserve) obj.reserve_id = this.obj.reserve.reserve_id;
                    let {code} = await this.$Http.setBedStatus(obj);
                    if(code){
                        this.$message.success('床位状态修改成功!');
                        this.handleClose();
                        this.getRoomStatus();
                    }
                }else{
                    let {code} = await this.$Http.addClock({order_project_id:obj.order_project_id});
                    if(code){
                        this.$message.success('项目加钟成功!');
                        this.handleClose();
                        this.getRoomStatus();
                    }
                }
                this.isBtn = false;
            })
        },
        conTime(){
            this.dataList.forEach(v=>{
                for(let v2 of v.bed){
                    if(v2.countDown){
                        // 计算出小时数
                        let residue1 = v2.countDown % (24 * 3600 * 1000); // 计算天数后剩余的毫秒数
                        let hours = Math.floor(residue1 / (3600 * 1000));

                        // 计算相差分钟数
                        let residue2 = residue1 % (3600 * 1000); // 计算小时数后剩余的毫秒数
                        let minutes = Math.floor(residue2 / (60 * 1000));

                        // 计算相差秒数
                        let residue3 = residue2 % (60 * 1000); // 计算分钟数后剩余的毫秒数
                        let seconds = Math.round(residue3 / 1000);
                        v2.time = `${hours==0 ? "" : hours+":"}${minutes>9?minutes:'0'+minutes}:${seconds>9?seconds:'0'+seconds}`
                        // ((hours == 0) ? "" : hours+":") +
                        // ((minutes == 0) ? "" : minutes+":") +
                        // ((seconds == 0) ? "" : seconds+"");
                        v2.countDown -= 1000;
                        if(v2.countDown<=0)v2.countDown = 0;
                    }
                }
            })
        },
        async getRoomStatus(){
            this.loading = true;
            let {code,data} = await this.$Http.getRoomStatus({
                store_id:this.shop_id,
                room_id:this.room_id
            });
            this.loading = false;
            if(code){
                clearInterval(this.temp);
                let date = new Date();
                data.forEach(v=>{
                    v.bed.forEach(v2=>{
                        v2.time = '';
                        if(v2.use_status==2&&v2.reserve&&v2.reserve.start){
                            v2.order = v2.reserve;
                            let date2 = new Date(`${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${v2.order.start}`);
                            v2.countDown = date2.getTime() - date.getTime()
                            //  this.utils.twoTimeInterval(`${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${v2.start}`,date)
                        }else if(v2.use_status==1&&v2.order&&v2.order.end){
                            let date2 = new Date(`${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${v2.order.end}`);
                            v2.countDown =  date2.getTime() - date.getTime() ;
                        }
                        if(v2.countDown<0)v2.countDown=0;
                    })
                })
                this.dataList = data;
                if(!this.room_id) this.roomList = data;
                this.conTime();
                this.temp = setInterval(this.conTime,1000)
            }
        },
        handleCurrentChange(){

        }
    },
    destroyed() {
　　　　//切记页面销毁需要销毁
　　　　clearInterval(this.temp);
　　　　console.log(this.temp, "销毁");
　　　},
};
</script>

<style lang="scss" scoped>
.technical-name{
    line-height: 30px;
    max-width: 100px;
    >div{
        border-top: 1px solid #dbcfcf;
        &:nth-child(1){
            border: none;
        }
    }
}
.vs-table-box {
    display: flex;
    flex-wrap: wrap;
    min-height: 300px;
    padding:15px;
    // padding-top: 30px;
    .room-chin {
        margin: 10px 15px;
        background: #fff;
        border-radius: 20px;
        padding: 20px 20px;
        padding-bottom: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        .room-title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .room-box {
            // width: 300px;
            display: flex;
            // grid-column-gap: 20px;
            >div{
                margin-left: 20px;
                &:nth-child(1){
                    margin-left: 0px;
                }
            }
            .leisure{
                background-color: hsla(162, 76%, 50%, 0.1);
                color: hsla(162, 76%, 50%, 1);
            }
            .make{
                background-color:hsla(218, 36%, 96%);
                color: hsl(215deg,19%,51%);
            }
            .use{
                background-color:hsla(5, 100%, 50%, 0.1);
                color: hsla(5, 100%, 50%, 1);
            }
            .stage {
                text-align: center;
                cursor: pointer;
                .time {
                    width: 60px;
                    height: 31px;
                    border-radius: 4px;
                    margin-bottom: 8px;

                    font-size: 16px;
                    font-weight: 500;
                    text-align: center;
                    line-height: 31px;
                }
                .status{
                    width: 60px;
                    height: 134px;
                    line-height: 28px;
                    border-radius: 4px;
                    margin-bottom: 8px;

                    display: flex;
                    justify-content: center;
                    align-items: center;
                    // flex-direction: column;
                    span{
                        font-size: 16px;
                        font-weight: 500;
                        text-align: center;
                        height: 30px;
                        line-height: 30px;
                    }
                    div{
                        font-weight: 600;
                        font-size: 20px;
                        width: 20px;
                    }
                }
                .beds-img{
                    width: 60px;
                    height: 50px;
                    border-radius: 4px;
                    background: #f0f3f8;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img{
                        width: 46px;
                        object-fit: cover;
                    }
                }
                .iconfont {
                    font-size: 60px;
                    line-height: 80px;
                }
            }
        }
    }
}
.color-box {
    display: flex;
    height: 50px;
    align-items: center;
    .color-zi {
        display: flex;
        // margin: 5px 0;
        height: 25px;
        align-items: center;
        margin-left: 20px;
        div {
            width: 15px;
            height: 15px;
            margin-right: 5px;
        }
    }
}
.icon-bed-box {
    margin-left: 20px;
    display: flex;
    height: 50px;
    align-items: center;
    .bed-zi {
        line-height: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        margin: 0 10px;
        color: #414040;
        img{
            width: 41px;
            object-fit: cover;
        }
        .iconfont {
            line-height: 25px;
            font-size: 23px;
            color: #828282;
        }
    }
}
.image-thumbnail {
    width: 130px;
    height: 130px;
}
</style>